import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../../config/global';
import { style } from '../../../../../theme/style';

const scale = GLOBAL.SCALE;
export class ChangeApproveItem extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { itemInfo, dictKey, goDetail, choice, approveType } = this.props;
		let { auditResultName, createByName, changeId, taskId, companyName, createTime, corpName, bizMode, subjectRemark, bizStaffName, bizTeamName, organName, formKey } = itemInfo;
		/**
			* DD 采购订单  RK 采购入库  FP 采购发票  FFP 费用发票  TK 客户退款
			*/
		const resUrl = 'ChangeDetailPage';
		return (
			<TouchableOpacity key={changeId} activeOpacity={.5} style={styles.orderCell}
				onPress={() => {
					goDetail({
						status: 'LOT',
						changeId,
						taskId,
						resUrl,
						auditResultName,
						formKey,
						approveType
					}, approveType == "LC" ? "框架变更详情" : '变更合同详情')
				}}>
				<View style={styles.order}>
					<View style={styles.orderHeadView}>
						<View style={styles.orderHead}>
							<View style={styles.orderHeadLeft}>
								<Text style={[styles.orderHeadText, { color: '#848A96' }]}>审批编号</Text>
								<Text style={styles.orderHeadText}>{changeId || '--'}</Text>
							</View>
							<Text style={[styles.orderHeadText, { color: '#848A96' }]}>业务组织：{corpName || '-'}</Text>
						</View>
					</View>
					<View style={styles.orderMain}>
						{
							approveType == "LC" ? <View style={[styles.orderCol, { width: 375 * scale }]}>
								<Text style={styles.orderText}>客商企业：</Text>
								<Text style={styles.orderVal}>{companyName || '-'}</Text>
							</View> : <View style={styles.orderCol}>
									<Text style={styles.orderText}>客商企业：</Text>
									<Text style={styles.orderVal}>
										{
											companyName ? (
												companyName.length > 8 ? (companyName.substr(0, 7) + '...') : companyName
											) : null
										}
									</Text>
								</View>
						}
						{
							approveType == "LC" ?
								null :
								<View style={styles.orderCol}>
									<Text style={styles.orderText}>是否闭口：</Text>
									<Text style={styles.orderVal}>{bizMode ? '是' : '否'}</Text>
								</View>
						}
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>申请人：</Text>
							<Text style={styles.orderVal}>{createByName || '--'}</Text>
						</View>
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>申请时间：</Text>
							<Text style={styles.orderVal}>{createTime ? createTime.substr(0, 16) : '--'}</Text>
						</View>
						<View style={styles.flexOrder}>
							<Text style={styles.orderName}>业务员：</Text>
							<Text style={styles.orderTitle}>{bizStaffName ? bizStaffName + ' | ' : '--'}{bizTeamName ? bizTeamName + ' | ' : '--'}{organName ? organName : '--'}</Text>
						</View>
						<View style={[styles.orderCol, { width: '100%' }]}>
							<Text style={styles.orderText}>变更类型：</Text>
							<Text style={styles.orderVal}>
								{
									subjectRemark ? (
										subjectRemark.length > 24 ? (subjectRemark.substr(0, 24) + '...') : subjectRemark
									) : null
								}</Text>
						</View>
					</View>
				</View>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	orderCell: {
		width: 375 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
		marginBottom: 12 * scale,
	},
	order: {
		width: 351 * scale,
	},
	orderHead: {
		width: 351 * scale,
		height: 44 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadView: {
		width: 351 * scale,
		borderBottomColor: '#e4e4e4',
		borderBottomWidth: 1 / PixelRatio.get(),
	},
	orderHeadLeft: {
		height: 44 * scale,
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadText: {
		fontSize: 14 * scale,
		color: '#222',
		flexWrap: 'wrap',
		marginRight: 4 * scale
	},
	statusText: {
		fontSize: 13 * scale,
		color: style.color.themeColor,
	},
	orderMain: {
		flexDirection: 'row',
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		flexWrap: 'wrap'
	},
	orderCol: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 25 * scale,
		width: 175.5 * scale,
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderVal: {
		fontSize: 12 * scale,
		color: '#000'
	},
	flexOrder: {
		flexDirection: 'row',
		width: 308 * scale,
	},
	orderName: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderTitle: {
		flexDirection: 'row',
		paddingRight: 15 * scale,
		fontSize: 12 * scale,
	},
})